<template>
  <div class='souce-main'>
    <h2>发起任务</h2>
    <ul class='content'>
      <li v-for='(item, index) in cardList' :key='index'>
      	<h3>{{item.name}}</h3>
      	<p>{{item.content}}</p>
      </li>
    </ul>
  </div>
</template>

<script>
	export default {
   		 name: 'startTask',
   		 data() {
   		 	return {
   		 		cardList: [
   		 			{
   		 				name: '主数据管理',
   		 				content: '注册'
   		 			},
   		 			{
   		 				name: '主数据管理',
   		 				content: '映射'
   		 			},
   		 			{
   		 				name: '主数据管理',
   		 				content: '变更'
   		 			},
   		 			{
   		 				name: '主数据管理',
   		 				content: '变更'
   		 			},
   		 			{
   		 				name: '元数据管理',
   		 				content: '新增数据集'
   		 			},
   		 			{
   		 				name: '元数据管理',
   		 				content: '新增数据集'
   		 			},
   		 			{
   		 				name: '元数据管理',
   		 				content: '新增数据集'
   		 			},
   		 			{
   		 				name: '元数据管理',
   		 				content: '新增数据集'
   		 			},
   		 			{
   		 				name: '数据质量管理',
   		 				content: '新增数据集'
   		 			},
   		 			{
   		 				name: '数据质量管理',
   		 				content: '新增数据集'
   		 			},
   		 			{
   		 				name: '数据质量管理',
   		 				content: '新增数据集'
   		 			},
   		 			{
   		 				name: '数据质量管理',
   		 				content: '新增数据集'
   		 			}
   		 		]
   		 	}
   		}
   }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .souce-main {
    padding: 0 20px 20px 20px;
    color: #666;
    h2 {
      height: 56px;
      line-height: 56px;
      color: #333;
      font-weight: normal;
      font-size: 18px;
    }
    .content {
      padding: 20px;
      margin-left: 20px;
      li {
      	display: inline-block;
      	list-style: none;
      	width: calc(25% - 20px);
      	margin-left: 20px;
      	margin-bottom: 20px;
      	height: 110px;
      	cursor: pointer;
      	border-radius: 2px;
  		background-color: #ffffff;
  		border: 1px solid rgba(0, 0, 0, 0.12);
  		&:hover {
  			box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.16);
  			border-color: #009ce3;
  		}
  		h3 {
			 height: 48px;
			 font-size: 18px;
			 line-height: 48px;
			 background-color: #f8f8f8;
			 text-align: center;
			 color: #666;
  		}
  		p {
  			color: #999;
  			font-size: 18px;
  			line-height: 62px;
  			height: 62px;
  			text-align: center;
  		}
      }
    }
  }
</style>